<template>
	<view class="login-container" :class="responsiveClass" :style="getContainerStyle('md')">
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>
		
		<!-- 应用品牌区域 -->
		<view class="brand-section">
			<view class="logo-container">
				<text class="logo-icon">⚡</text>
			</view>
			<text class="app-name">QuickMind</text>
			<text class="app-slogan">祝你脱离头脑风暴</text>
		</view>
		
		<!-- 登录表单 -->
		<form class="login-form" @submit.prevent="handleLogin">
			<!-- 手机号/邮箱输入 -->
			<view class="input-group">
				<text class="input-label">用户名/邮箱</text>
				<view class="input-container">
					<text class="input-icon" >👤</text>
					<input 
						class="input-field" 
						type="text" 
						placeholder="请输入手机号或者邮箱"
						v-model.trim="loginForm.Username"
						@input="validateInput"
					/>
				</view>
			</view>
			
			<!-- 密码输入 -->
			<view class="input-group">
				<view class="password-header">
					<text class="input-label">密码</text>
					<text class="forgot-password" @click="forgotPassword">忘记密码?</text>
				</view>
				<view class="input-container">
					<text class="input-icon">🔒</text>
					<input 
						class="input-field" 
						type="password"
						:style="{ '-webkit-text-security': showPassword ? 'none' : 'disc' }"
						placeholder="请输入密码"
						v-model.trim="loginForm.Password"
						@input="validateInput"
					/>
					<text 
						class="password-toggle" 
						@click="togglePasswordVisibility"
					>
						{{ showPassword ? '👁️' : '🙈' }}
					</text>
				</view>
			</view>
			
			<!-- 登录按钮 -->
			<button 
				class="login-button" 
				:class="{ 'login-button-active': isFormValid }"
				:disabled="!isFormValid"
				type="submit"
				@click="loginIndex"
			>
				登录
			</button>
			
			<!-- 记住密码选项 -->
			<view class="remember-section">
				<view class="checkbox-container" @click="toggleRememberPassword">
					<view class="checkbox" :class="{ 'checkbox-checked': rememberPassword }">
						<text v-if="rememberPassword" class="checkbox-icon">✓</text>
					</view>
					<text class="checkbox-label">记住密码</text>
				</view>
			</view>
			
			<!-- 自动登录提示 -->
			<view class="auto-login-note">
				<text class="note-text">💡 应用启动时会自动使用默认账号登录</text>
				<text class="note-text">默认账号: admin7788 / 123456</text>
			</view>
		</form>
		
		<!-- 弹性空间 -->
		<view class="flex-space"></view>
			

			
			<!-- 注册链接 -->
			<view class="register-section">
				<text class="register-text">
					还没有账号? 
					<text class="register-link" @click="goToRegister">立即注册</text>
				</text>
			</view>
	</view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import {useUserStore} from '@/store/user.js'
import http from '@/utils/request.js'

import { login } from '../../api/user'
const loginForm = ref({
	Username: 'admin7788',
	Password: '123456'
})

let useUserInfo =useUserStore()
const showPassword = ref(false)
const rememberPassword = ref(false)
const isFormValid = ref(false)

// 表单验证方法
const validateInput = () => {
  const username = (loginForm.value.Username || '').trim();
  const password = (loginForm.value.Password || '').trim();
  console.log('表单验证 - 用户名:', username, '密码:', password);
  isFormValid.value = username !== '' && password !== '';
  console.log('表单验证结果:', isFormValid.value);
}

const togglePasswordVisibility = () => {
	showPassword.value = !showPassword.value
	console.log('密码显示状态:', showPassword.value ? '显示' : '隐藏')
}

const toggleRememberPassword = () => {
	rememberPassword.value = !rememberPassword.value
}

const handleLogin = async () => {
	if (!isFormValid.value) {
		uni.showToast({
			title: '请填写完整信息',
			icon: 'none'
		})
		return
	}
	
	try {
		uni.showLoading({
			title: '登录中...'
		})
		
		// 模拟登录请求
		await new Promise(resolve => setTimeout(resolve, 1500))
		
		uni.hideLoading()
		uni.showToast({
			title: '登录成功',
			icon: 'success'
		})
		
		// 保存登录状态
		if (rememberPassword.value) {
			uni.setStorageSync('rememberPassword', true)
			uni.setStorageSync('savedPhoneOrEmail', loginForm.phoneOrEmail)
		}
		
		// 跳转到主页
		setTimeout(() => {
			uni.navigateTo({
				url: '/pages/index/index'
			})
		}, 1000)
		
	} catch (error) {
		uni.hideLoading()
		uni.showToast({
			title: '登录失败，请重试',
			icon: 'none'
		})
	}
}

const forgotPassword = () => {
	console.log('点击忘记密码，准备跳转...')
	
	// 直接跳转到忘记密码页面
	uni.navigateTo({
		url:'/pages/forget/forget'
	})
}



const goToRegister = () => {
	uni.navigateTo({
		url:'/pages/register/register'
	})
}

// 页面加载时初始化表单验证
onMounted(() => {
  validateInput();
  // 确保密码字段初始状态是隐藏的
  showPassword.value = false
  console.log('页面加载完成，密码隐藏状态:', showPassword.value)
})



let loginIndex = async () => {
  const res = await login(loginForm.value)
  const tokenData = res?.data || res
  console.log('login response:', res)

  // 保存到 pinia
  useUserInfo.setUserInfo(tokenData?.user || null)

  // 仅保存 accessToken
  if (tokenData?.accessToken) {
    uni.setStorageSync('token', tokenData.accessToken)
  }
  if (tokenData?.refreshToken) {
    uni.setStorageSync('refreshToken', tokenData.refreshToken)
  }
  if (tokenData?.user) {
    uni.setStorageSync('userInfo', tokenData.user)
  }

  uni.navigateTo({
    url: '/pages/index/index'
  })
}




</script>

<style scoped>
.login-container {
	min-height: 100vh;
	height: 100vh;
	width: 100%;
	background: #f8f9fa;
	padding: 0 40rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	overflow-x: hidden;
}

.status-bar {
	height: calc(80rpx + env(safe-area-inset-top, 0px));
}

.brand-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 5.1875rem;
	margin-bottom: 2.5rem;
	flex-shrink: 0;
}

.logo-container {
	width: 140rpx;
	height: 140rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 40rpx;
	box-shadow: 0 12rpx 40rpx rgba(102, 126, 234, 0.25);
}

.logo-icon {
	font-size: 70rpx;
	color: #ff6b35;
	filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
}

.app-name {
	font-size: 52rpx;
	font-weight: 700;
	color: #2c3e50;
	margin-bottom: 20rpx;
	letter-spacing: 1rpx;
}

.app-slogan {
	font-size: 30rpx;
	color: #7f8c8d;
	letter-spacing: 0.5rpx;
}

.login-form {
	margin-bottom: 50rpx;
	flex-shrink: 0;
}

.input-group {
	margin-bottom: 35rpx;
}

.input-label {
	font-size: 30rpx;
	color: #2c3e50;
	margin-bottom: 20rpx;
	display: block;
	font-weight: 500;
}

.password-header {
	display: flex;
	justify-content: space-between;
	/* margin-bottom: 0.625rem; */
}

.forgot-password {
	font-size: 26rpx;
	color: #95a5a6;
}

.input-container {
	position: relative;
	display: flex;
	align-items: center;
	background: white;
	border-radius: 20rpx;
	padding: 0 30rpx;
	box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
	border: 2rpx solid transparent;
	transition: all 0.3s ease;
}

.input-container:focus-within {
	border-color: #667eea;
	box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.15);
}

.input-icon {
	font-size: 36rpx;
	margin-right: 20rpx;
	color: #667eea;
}

.input-field {
	flex: 1;
	height: 100rpx;
	font-size: 30rpx;
	color: #2c3e50;
}

/* 密码隐藏样式 */
.input-field[type="password"] {
	-webkit-text-security: disc;
	text-security: disc;
}





.input-field::placeholder {
	color: #bdc3c7;
}

.password-toggle {
	font-size: 36rpx;
	color: #95a5a6;
	padding: 20rpx;
	cursor: pointer;
}

.login-button {
	width: 100%;
	height: 90rpx;
	background: #ecf0f1;
	border: none;
	border-radius: 20rpx;
	font-size: 34rpx;
	color: #7f8c8d;
	margin-top: 35rpx;
	transition: all 0.3s ease;
	font-weight: 500;
}

.login-button-active {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	box-shadow: 0 10rpx 30rpx rgba(102, 126, 234, 0.3);
	transform: translateY(-2rpx);
}

.login-button-active:active {
	transform: translateY(0);
}

.remember-section {
	margin-top: 25rpx;
}

.checkbox-container {
	display: flex;
	align-items: center;
}

.checkbox {
	width: 36rpx;
	height: 36rpx;
	border: 2rpx solid #bdc3c7;
	border-radius: 8rpx;
	margin-right: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: white;
	transition: all 0.3s ease;
}

.checkbox-checked {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-color: #667eea;
}

.checkbox-icon {
	color: white;
	font-size: 22rpx;
	font-weight: bold;
}

.checkbox-label {
	font-size: 30rpx;
	color: #2c3e50;
	font-weight: 500;
}

.other-login {
	margin-bottom: 80rpx;
}

.divider {
	display: flex;
	align-items: center;
	margin-bottom: 50rpx;
}

.divider-line {
	flex: 1;
	height: 1rpx;
	background: #ecf0f1;
}

.divider-text {
	font-size: 26rpx;
	color: #95a5a6;
	margin: 0 40rpx;
	font-weight: 500;
}

.social-login {
	display: flex;
	justify-content: center;
	gap: 100rpx;
}

.social-icon {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background: white;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	position: relative;
}

.social-icon:active {
	transform: scale(0.95);
}

.social-icon-img {
	width: 80rpx;
	height: 80rpx;
}

.register-section {
	text-align: center;
	padding-bottom: 50rpx;
	flex-shrink: 0;
}

.register-text {
	font-size: 30rpx;
	color: #7f8c8d;
}

.register-link {
	color: #667eea;
	font-weight: 600;
}

.test-section {
	margin-top: 30rpx;
	margin-bottom: 30rpx;
	flex-shrink: 0;
}

.test-button {
	width: 100%;
	height: 80rpx;
	background: #95a5a6;
	border: none;
	border-radius: 20rpx;
	font-size: 28rpx;
	color: white;
	transition: all 0.3s ease;
	font-weight: 500;
	margin-bottom: 20rpx;
}

.test-button:active {
	background: #7f8c8d;
	transform: scale(0.98);
}

.network-status-button {
	width: 100%;
	height: 80rpx;
	background: #3498db;
	border: none;
	border-radius: 20rpx;
	font-size: 28rpx;
	color: white;
	transition: all 0.3s ease;
	font-weight: 500;
}

.network-status-button:active {
	background: #2980b9;
	transform: scale(0.98);
}

/* 自动登录提示样式 */
.auto-login-note {
	margin-top: 20rpx;
	padding: 20rpx;
	background: #e8f5e8;
	border-radius: 15rpx;
	border: 1px solid #c8e6c9;
}

.note-text {
	display: block;
	font-size: 24rpx;
	color: #2e7d32;
	text-align: center;
	line-height: 1.5;
	margin-bottom: 8rpx;
}

.note-text:last-child {
	margin-bottom: 0;
}

.flex-space {
	flex: 1;
	min-height: 40rpx;
}

/* 响应式断点样式 */
/* 平板断点 */
@media (min-width: 481px) {
  .login-container {
    max-width: 480px;
    margin: 0 auto;
  }
  
  .login-form {
    padding: 0 40rpx;
  }
  
  .input-field {
    font-size: 32rpx;
  }
}

/* 桌面中等断点 */
@media (min-width: 769px) {
  .login-container {
    max-width: 520px;
    margin: 0 auto;
  }
  
  .login-form {
    padding: 0 60rpx;
  }
  
  .brand-section {
    margin-bottom: 80rpx;
  }
  
  .app-name {
    font-size: 48rpx;
  }
  
  .app-slogan {
    font-size: 32rpx;
  }
}

/* 桌面大屏断点 */
@media (min-width: 1025px) {
  .login-container {
    max-width: 560px;
    margin: 0 auto;
  }
  
  .login-form {
    padding: 0 80rpx;
  }
  
  .input-group {
    margin-bottom: 40rpx;
  }
  
  .login-button {
    height: 100rpx;
    font-size: 36rpx;
  }
}
</style>
